<template>
  <div class="lab">
    <h3>实验室</h3>
    <h4>在这里会展示一些实验性功能，大家可以抢先体验</h4>
    <h4>这些功能可能不稳定或者使起始页性能下降，请各位见谅</h4>
    <br/>
    <el-table
        :data="labItem"
        :show-header="false"
        style="width: 100%">
      <el-table-column
          align="center"
          label="条目">
        <template v-slot="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="描述"
          width="300">
        <template v-slot="scope">
          <span>{{scope.row.describe}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-switch
              @change="scope.row.function"
              v-model="scope.row.operation"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//实验室功能
export default {
  name: "lab",
  data() {
    return {
      blur: false,
      labItem: [
        {
          function: () => {
            localStorage.setItem("isBlur", this.labItem[0].operation ? "1" : "0")
            this.$bus.$emit("switchBlur", this.labItem[0].operation)
            if (!this.labItem[0].operation) {
              localStorage.removeItem("blur")
            }
          },
          title: "背景模糊",
          describe: "注意，“背景模糊”功能可能严重影响起始页响应速度，表现为动画迟钝等；背景模糊开启后，请在起始页右下角设置模糊度",
          operation: false
        },
        {
          function: () => {
            localStorage.setItem("urlCheck", this.labItem[1].operation ? "1" : "0")
          },
          title: "网址自动识别",
          describe: "在搜索框检测到“http”/“https”开头的网址时，将不进行搜索，而是直接访问对应页面",
          operation: false
        },
      ]
    }
  },
  methods: {

  },
  mounted() {
    let blur = localStorage.getItem("isBlur");
    let url = localStorage.getItem("urlCheck");
    this.labItem[0].operation = blur === "1"
    this.labItem[1].operation = url === "1"
  }
}
</script>

<style scoped>
.lab {
  text-align: center;
  margin: auto;
  max-height: 352px;
}
.lab h4 {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
